import React, { useEffect, useState } from 'react'
import { Card, Form, Button, Input, Select, Table, Row, Col, message } from 'antd'
import { SearchOutlined, EditOutlined, DeleteOutlined } from "@ant-design/icons"
import {getHospitalListRequest,getProvinceRequest,getCityOrDistrictRequest,updateStatusRequest} from '@api/hospital/hospitalList'
import type {getHosListSearchParamsType,hospitalListContentType,hospitalListItemsType,getProvinceReturnType} from '@api/hospital/model/hospitalListTypes'
import { useNavigate } from 'react-router-dom'

export default function HospitalList() {
  const navigate = useNavigate()
  const [form] = Form.useForm()
  //控制表格的是否加载中的状态
  const [isLoading, setIsLoading] = useState(false);
  //控制当前页码的状态
  const [page, setPage] = useState(1);
  //控制每页显示的条数
  const [limit, setLimit] = useState(3);
  //控制医院总数量
  const [total, setTotal] = useState(0)
  //控制查询时用户输入的表单参数
  const [searchParams, setSearchParams] = useState<getHosListSearchParamsType>({})
  //控制表格的数据
  const [hospitalList,setHospitalList] = useState<hospitalListContentType>([])
  //保存获取省份返回数据
  const [province,setProvince] = useState<getProvinceReturnType>([])
  //保存市的数据
  const [cityList,setCityList] = useState<getProvinceReturnType>([])
  //保存区
  const [district,setDistrict] = useState<getProvinceReturnType>([])
  //保存医院等级
  const [hospitalType,setHospitalType] = useState<getProvinceReturnType>([])
  //定义状态重新渲染页面
  const [reRender,setReRender] = useState(true)
  //刚加载组件的时候,发送医院列表的请求
  useEffect(() => {
    setIsLoading(true)
    const getHosList = async () => {
      const re = await getHospitalListRequest(page,limit,searchParams)
      setHospitalList(re.content)
      setTotal(re.totalElements)
      setIsLoading(false)
    }
    getHosList()
  },[page,limit,searchParams,reRender])
  //获取省份
  useEffect(() => {
    const getProvince = async () => {
      const re = await getProvinceRequest()
      setProvince(re)
    }
    getProvince()
  },[])
  //获取医院等级
  useEffect(() => {
    const getHospitalType = async () => {
      const re = await getCityOrDistrictRequest('10000')
      setHospitalType(re)
    }
    getHospitalType()
  },[])
  //根据省份获取市
  const changeProviceHandle = async (value:string) => {
    const re = await getCityOrDistrictRequest(value)
    setCityList(re)
    form.setFieldsValue({cityCode:null,districtCode:null})
    setDistrict([])
  }
  //根据市获取区
  const changeCityHandle = async (value:string) => {
    const re = await getCityOrDistrictRequest(value)
    setDistrict(re)
    form.setFieldsValue({districtCode:null})
  }
  //查询
  const finishHandle = (value:getHosListSearchParamsType) => {
    setSearchParams(value)
  }
  //清空
  const clearHandle = () => {
    setSearchParams({})
  }
  //点击更改上线下线
  const changeStatusHandle = (id:string,status:0|1) => {
    console.log(id,status);
    
    return async () => {
      await updateStatusRequest(id,status)
      setReRender(!reRender)
      message.success('更新状态成功')
    }
  }
  const columns = [
    {
      title: '序号',
      width: 60,
      dataIndex: 'index',
      render(_: any, __: any, index: number) {
        return index + 1
      }
    },
    {
      title: '医院logo',
      dataIndex: 'logoData',
      render(logoData:string) {
        return <img width={100} src={`data:image/jpeg;base64,${logoData}`} alt="" />
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname',
    },
    {
      title: '等级',
      render(_:any,data:hospitalListItemsType){
        return data.param.hostypeString
      }
    },
    {
      title: '详细地址',
      render(_:any,data:hospitalListItemsType){
        return data.param.fullAddress
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      render(status:0|1){
        return status === 0 ? '下线':'上线'
      }
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      width: 120,
      fixed: "right" as "right",
      render(_: any,data:hospitalListItemsType) {
        const {id} = data
        const {hoscode} = data
        return (
          <div>
            <Button type='primary' onClick={() => {navigate(`/syt/hospital/hoapitalshow/${id}`,{
              state:{hello:'world'}
            })}}>查看</Button>
            <Button type='primary' onClick={() => {navigate(`/syt/hospital/hospitalSchedule/${hoscode}`)}}>排班</Button>
            <Button type='primary' onClick={changeStatusHandle(id,data.status === 0 ? 1 : 0)}>{data.status === 0 ? '上线' : '下线'}</Button>
          </div >
        )
      }
    }
  ];
  return (
    <div>
      <Card>
        <Form
          name="basic"
          form={form}
          onFinish={finishHandle}
        // wrapperCol={{ span: 30 }}
        >
          <Row gutter={10}>
            <Col span={4}>
              <Form.Item
                name="provinceCode"
              >
                <Select
                  placeholder="请输入省份"
                  allowClear
                  onChange={changeProviceHandle}
                >
                  {
                    province.map(item => {
                      return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="cityCode"
              >
                <Select
                  placeholder="请输入市"
                  allowClear
                  onChange={changeCityHandle}
                >
                  {
                    cityList.map(item => {
                      return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="districtCode"
              >
                <Select
                  placeholder="请输入县/区"
                  allowClear
                >
                  {
                    district.map(item => {
                      return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hosname"
              >
                <Input placeholder="医院名称" />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hoscode"
              >
                <Input placeholder='医院编号' />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                name="hostype"
              >
                <Select
                  placeholder="医院类型"
                  allowClear
                >
                  {
                     hospitalType.map(item => {
                      return <Select.Option value={item.value} key={item.id}>{item.name}</Select.Option>
                    })
                  }
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={10}>
            <Col span={4}>
              <Form.Item
                name="status"
              >
                <Select
                  placeholder="医院状态"
                  allowClear
                >
                  <Select.Option value={1}>上线</Select.Option>
                  <Select.Option value={0}>下线</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={1.5}>
              <Form.Item >
                <Button type="primary" htmlType="submit" icon={<SearchOutlined />} >
                  查询
                </Button>
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item >
                <Button type="default" htmlType="reset" onClick={clearHandle} >
                  清空
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Table
          style={{ marginTop: "30px" }}
          columns={columns}
          dataSource={hospitalList}
          scroll={{ x: 1400 }}
          bordered
          //在table中 要求dataSource中有key属性,但是如果真的没有key 则可以使用rowKey属性指定dataSource中的一个属性作为Key
          rowKey="id"
          loading={isLoading}
          pagination={{
            //页码的配置：当前页码
            current: page,
            //总数据的数量
            total:total,
            //每页条数
            pageSize: limit,
            //展示更改每页条数的选项(默认total大于50条的时候开启)
            pageSizeOptions: [3, 8, 15],
            //是否直接开启更新每页条数的选项
            showSizeChanger: true,
            showTotal(total) {
              return `总共有${total}条数据`
            },
            onChange(page,pageSize){
              setPage(page)
              setLimit(pageSize)
            }
          }}
        />
      </Card>
    </div >
  )
}
